<template>
  <div>
    <div class="header">
      <el-row :gutter="10">
        <el-col :xs="3" :sm="3" :md="3" :lg="5">
            <div class="grid-content" :gutter="10">
              <el-row :gutter="10">
                <el-col :xs="3" :sm="8" style="border:1px solid white">
                  <div class="icon"></div>
                </el-col>
                <el-col :xs="3" :sm="16">
                  <div class="shops"></div>
                </el-col>
              </el-row>
            </div>
        </el-col>
        <el-col :xs="16" :sm="14" :md="14" :lg="13">
            <div class="grid-content">
              <el-row class="elRow">
                <el-col v-for="(item,index) in listData" :key="index" :span="spanNum">
                  <div class="list" id="list" @click="linkGoods(item.type)" @mouseover="mouseOver" @mouseleave="mouseLeave">{{item.label}}</div>
                </el-col>
              </el-row>
            </div>
        </el-col>
        <el-col :xs="5" :sm="7" :md="7" :lg="6">
          <div class="grid-content">
            <div class="rightSearch">
              <el-input placeholder="请输入商品名称" v-model="serach" class="input-with-select search" @keypress.native.enter="search">
                <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
              </el-input>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { findGoodsBySearch } from "@/js/api/home";
export default {
  name:'headerNav',
  props:{
    listData: {
      type: Array,
      default: function(){
        return [
          { label: "大米手机", type: "dami" },
          { label: "红米", type: "redmi" },
          { label: "大米手机", type: "dami2" },
          { label: "电视", type: "tv" },
          { label: "平板", type: "pad" },
          { label: "电脑", type: "computer" },
          { label: "路由器", type: "roter" },
          { label: "手机", type: "phone" },
        ]
      }
    },
  },
  data(){
    return {
      serach:"",
    }
  },
  computed:{
    spanNum:function(){
      return parseInt(24/(this.listData.length))
    },
  },
  mounted(){
    this.$emit("loadList",JSON.stringify(this.listData))
  },
  methods:{
    search(){
      let obj = {
        action:'search',
        value:this.serach
      }
      if(this.serach!=""){
        if(this.$route.name != "goodsList"){
          this.$router.push({name: 'goodsList', params:{val:JSON.stringify(obj)}});
        }else{
          this.$emit("search",obj)
        }
      }
    },
    mouseOver(val){
      val.target.style.background = "#f5f5f5"
    },
    mouseLeave(val){
      val.target.style.background = "white"
    },
    linkGoods(val){
      this.$router.push({name: 'goodsList', params: {type: val}});
    },
  }
}
</script>
<style lang="less">
  .header{
    margin: 10px 0 0 0;
    height: 70px;
    .el-row,.el-row .el-col{
      height: 70px;
    }
    .grid-content{
      height: 100%;
      ul{
        margin: 0;
        height: 100%;
        li{
          width: 100%;
          line-height: 65px;
          height: 100%;
          float: left;
          list-style-type: none;
        }
      }
      .elRow{
        line-height: 70px;
        text-align: center;
        .list{
          cursor: pointer;
          border-radius: 3px;
        }
      }
      .icon{
        margin: 5px 5px;
        height: 85%;
        width: 80%;
        background-color: #ff6700;
        background-image: url(~@/assets/img/mi.png);
        background-repeat:no-repeat;
        background-position-x: center;
        background-position-y: center;
      }
      .shops{
        height: 100%;
        width: 100%;
        background-image: url(~@/assets/img/shops.gif);
      }
    }
    .rightSearch{
      height: 100%;
      .el-input__inner{
        border-radius: 0;
        height: 100%;
      }
      .el-button--default,.el-input-group__append{
        border-radius: 0;
        background-color: white;
      }
    }
    .search{
      margin-top: 10px;
      height: 70%;
    }
  }
</style>